<script setup>
import { } from "vue-router"
import { ref, reactive, getCurrentInstance, onMounted, defineEmits, watch, defineProps, computed } from "vue"
import { zmy } from "../../../../store/zmy-zm/store.js"
import { xorBy } from "lodash";
const { proxy } = getCurrentInstance()
let req = getCurrentInstance()
let store = zmy()
let res = ref()
let total = ref()
let from = ref()
let to = ref()
let emit = defineEmits()

//   接收
let obj = defineProps(["page", 'pepnums', 'isfrees', 'areas', 'lowprice', 'highprice','light'])


//   网络请求
onMounted(async () => {
    // 页面加载时获取第一页内容
    res.value = await proxy.$axios("/morehouse", { params: { page: obj.page, isfree: obj.isfrees } })
    total.value = res.value.data.total
    from.value = res.value.data.from[0]
    to.value = res.value.data.from[1]
    res.value = res.value.data.data
    emit("total", total.value)
    emit("from", from.value, to.value)
})
// 监听页数
watch(obj, async (v, n) => {
    res.value = await proxy.$axios("/morehouse", { params: { page: v.page, pepnums: obj.pepnums, isfree: obj.isfrees, areas: obj.areas, lowprice: obj.lowprice, highprice: obj.highprice } })
    total.value = res.value.data.total
    from.value = res.value.data.from[0]
    to.value = res.value.data.from[1]
    res.value = res.value.data.data
    emit("from", from.value, to.value)
    emit("total", total.value)
})

// 鼠标移入定位
let mapres = ref()
let enter = async (hid) => {
    console.log(hid);
    let res = await proxy.$axios("/map", { params: { hid: hid } })
    mapres.value = res.data.arr[0]
    emit("mapdata", mapres.value)
}
// 收藏开关
let flag = true
let heart = ref()
heart.value = "heart1"
let wishflag=ref()//收藏为falsh
let wishid=ref()//收藏的hid
let th=ref()
let hear = async (e, index, x) => {
    th = e.currentTarget
    if(th.className == "heart1"){
        wishflag.value=false
        wishid.value=x
    }else if(th.className == "heart"){
        wishflag.value=true
    }

}
watch(wishflag,(n,v)=>{
    emit("wish",n,wishid)
})
watch(obj,(n,v)=>{
    
    if(n.light==true){
        th.className = "heart"
        wishflag.value=false
    }else{
        wishflag.value=true
        th.className = "heart1"

    }
})

</script>

<template>

    <div class="minbox" v-for="(el,index) in res" :key="index" @mouseenter="enter(el.hid)">
        <div class="pic">
            <div @click="hear($event,index,el.hid)" :class="heart"></div>
            <img :src="el.pictrue" alt="" />
        </div>
        <div className="content">
            <p class="name">{{el.name}}·{{el.housetype}}</p>
            <h3>{{el.miaosu}}</h3>
        </div>
        <div className="human">
            <h4>￥{{el.price}}</h4>
            <p class="night">/晚</p>
            <p class="discount">√{{el.discount}}</p>
            <img :src="el.touxiang" alt="" />
        </div>
        <!-- {{store.mapdata}} -->
    </div>
</template>


<style lang="scss" scoped>



.minbox {
    border: 0.2px solid rgba(118, 118, 118, 0.5);
    height: 200px;
    width: 95%;
    margin: 2% 0;
    display: flex;
    justify-content: space-around;
    border-radius: 8px;
    cursor: pointer;
    position: relative;

    &:hover {
        box-shadow: 0px 0px 1px 1px rgba(152, 148, 148, 0.5);
    }

    .pic {
        width: 30%;
        height: 100%;
        position: relative;

        .heart {
            width: 15%;
            height: 20%;
            position: absolute;
            top: 0;
            right: 0;
            background: url(../../img/heart-2.png) no-repeat;
            background-size: 100%;

        }

        .heart1 {
            width: 15%;
            height: 20%;
            position: absolute;
            top: 0;
            right: 0;
            background: url(../../img/heart-1.png) no-repeat;
            background-size: 100%;
        }

        img {
            border-radius: 6px;
            width: 100%;
            height: 100%;
        }


    }

    .content {
        width: 50%;
        height: 100%;
        margin: 10px;

        p {
            font-weight: 800;
            font-size: 12px;
            color: rgb(118, 118, 118);
        }
    }

    .human {
        width: 20%;
        height: 100%;

        h4 {
            text-indent: 100px;
        }

        .night {
            text-indent: 125px;
            color: rgb(118, 118, 118);
            font-size: 10px
        }

        .discount {
            text-indent: 60px;
            color: rgb(118, 118, 118);
            font-size: 10px
        }

        img {
            border-radius: 50%;
            position: relative;
            top: 33px;
            left: 93px;
        }
    }

}
</style>